<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<style type="text/css">
	.flex-box{ display: flex; width: 650px; background: blue;}
	.flex-item{ background: yellow; flex-grow: 1;}
	.flex-item1{ width: 100px; height: 50px; }
	.flex-item2{ height: 100px; flex-basis: 300px;}
	.flex-item3{ width: 100px; height: 80px;}
	.flex-item4{ width: 100px; height: 180px;}
	</style>
</head>
<body>
	<div class="flex-box">
		<div class="flex-item flex-item1">11</div>
		<div class="flex-item flex-item2">22</div>
		<div class="flex-item flex-item3">33</div>
		<div class="flex-item flex-item4">44</div>
	</div>
	<div>其实就是和width一样的作用</div>
	<div>它可以设为跟width或height属性一样的值（比如300px），则项目将占据固定空间。</div>
</body>
</html>